import React, { memo, useCallback, useEffect, } from 'react'
import { useDispatch, useSelector, shallowEqual } from 'react-redux'

import WYThemeHeaderRCM from '@/components/theme-header-rcm'
import TopRanking from '@/components/top-ranking'

import { getRankingListAction } from '../../store/actionCreators'

import { useHistory } from 'react-router-dom'

import { RankWrapper } from './style'

export default memo(function WYRankingList() {

  const state = useSelector(state => {
    return {
      rank1: state.getIn(["recommend", "rank1"]),
      rank2: state.getIn(["recommend", "rank2"]),
      rank3: state.getIn(["recommend", "rank3"])
    }
  }, shallowEqual)

  // console.log(state)

  const history = useHistory()
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(getRankingListAction({
      idx: 0
    }))
    dispatch(getRankingListAction({
      idx: 2
    }))
    dispatch(getRankingListAction({
      idx: 3
    }))
  }, [dispatch])

  const keywordClick = useCallback((keyword) => {
    history.push({
      pathname: "/discover/songs",
      cat: keyword
    })
  }, [history])

  return (
    <RankWrapper>
      <WYThemeHeaderRCM
        title="榜单"
        moreLink="/discover/songs"
        keywordClick={keywordClick}
      ></WYThemeHeaderRCM>
      <div className="top">
        <TopRanking info={state.rank3}></TopRanking>
        <TopRanking info={state.rank1}></TopRanking>
        <TopRanking info={state.rank2}></TopRanking>
      </div>
    </RankWrapper>
  )
})